<template>
  <ul class="steps">

  </ul>
</template>
<script>
export default {
  name: 'Step',
  props: {
    dataSort: {
      type: [String, Number]
    },
    step: {
      type: Number,
      default: 1
    },
    message: {
      default: '空'
    }
  },
  computed: {

  },
  watch: {

  },
  data() {
    return {
      x: null,
      b: null
    };
  },
  methods: {

  },
  created() {
    if (this.dataSort == 1) {
      this.data = ['发布', '上报', '审核', '完结'];
    } else {
      this.data = ['发布', '填报', '完结'];
    }
    // step处理小数点
    this.x = ((this.step - Math.floor(this.step)) * 100).toFixed(1);
    // this.b = (1 / this.data.length).toFixed(2) * 100;
  }
};
</script>
<style scoped>
.steps {
  position: relative;
  counter-reset: step;/*创建步骤数字计数器*/
  display: flex;
  justify-content: center;
}
/*步骤描述*/
.steps li {
  list-style-type: none;
  font-size: 16px;
  text-align: center;
  width: 25%;
  position: relative;
  color: #777;
  z-index: 2;
  float: left;
}
.steps>li:last-child{
  width: 120px;
}
 /*步骤数字*/
.steps li:before {
  display: block;
  content: counter(step);/*设定计数器内容*/
  counter-increment: step;/*计数器值递增*/
  width: 32px;
  height: 32px;
  background-color: rgba(235, 238, 245, 1);
  line-height: 32px;
  border-radius: 32px;
  font-size: 16px;
  color: #999999;
  font-weight: 700;
}
.text{
  text-align: left;
  width: 60%;
}
.text>div{
  font-size: 14px;
  word-wrap: break-word;
}
.text>div:first-child{
  font-size: 18px;
  font-weight:bold;
  margin-top:10px;
}
.steps li .rightLine {
  content: '';
  width: 100%;
  height: 8px;
  background-color: rgba(235, 238, 245, 1);
  position: absolute;
  top: 11px;
  right: 0;
  z-index: -1;/*放置在数字层后面*/
}
.active::before{
  background-color: #0D8AE4!important;
  color: #ffffff!important;
}

.line{
  width: 100px;
  height: 8px;
  background: #0D8AE4;
  width:100%;
}
</style>
